<template>
    <div id="preloader_6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>

<script>
    export default {
        name: "MLoding6"
    }
</script>

<style scoped>
    #preloader6{
        position:relative;
        width: 42px;
        height: 42px;
        -webkit-animation: preloader_6 5s infinite linear;
        -moz-animation: preloader_6 5s infinite linear;
        -ms-animation: preloader_6 5s infinite linear;
        animation: preloader_6 5s infinite linear;
    }
    #preloader6 span{
        width:20px;
        height:20px;
        position:absolute;
        background:red;
        display:block;
        -webkit-animation: preloader_6_span 1s infinite linear;
        -moz-animation: preloader_6_span 1s infinite linear;
        -ms-animation: preloader_6_span 1s infinite linear;
        animation: preloader_6_span 1s infinite linear;
    }
    #preloader6 span:nth-child(1){
        background:#2ecc71;

    }
    #preloader6 span:nth-child(2){
        left:22px;
        background:#9b59b6;
        -webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -ms-animation-delay: .2s;
        animation-delay: .2s;

    }
    #preloader6 span:nth-child(3){
        top:22px;
        background:#3498db;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -ms-animation-delay: .4s;
        animation-delay: .4s;
    }
    #preloader6 span:nth-child(4){
        top:22px;
        left:22px;
        background:#f1c40f;
        -webkit-animation-delay: .6s;
        -moz-animation-delay: .6s;
        -ms-animation-delay: .6s;
        animation-delay: .6s;
    }

    @-webkit-keyframes preloader_6 {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
    }
    @-webkit-keyframes preloader_6_span {
        0% { -webkit-transform:scale(1); }
        50% { -webkit-transform:scale(0.5); }
        100% { -webkit-transform:scale(1); }
    }


    @-moz-keyframes preloader_6 {
        from {-moz-transform: rotate(0deg);}
        to {-moz-transform: rotate(360deg);}
    }
    @-moz-keyframes preloader_6_span {
        0% { -moz-transform:scale(1); }
        50% { -moz-transform:scale(0.5); }
        100% { -moz-transform:scale(1); }
    }

    @-ms-keyframes preloader_6 {
        from {-ms-transform: rotate(0deg);}
        to {-ms-transform: rotate(360deg);}
    }
    @-ms-keyframes preloader_6_span {
        0% { -ms-transform:scale(1); }
        50% { -ms-transform:scale(0.5); }
        100% { -ms-transform:scale(1); }
    }

    @-ms-keyframes preloader_6 {
        from {-ms-transform: rotate(0deg);}
        to {-ms-transform: rotate(360deg);}
    }
    @keyframes preloader_6_span {
        0% { transform:scale(1); }
        50% { transform:scale(0.5); }
        100% { transform:scale(1); }
    }

</style>
